<template>
	<view class="navBarBox" :style="{'backgroundColor':navBarOpcaticy,'height':navBarHeight}" @click="goBack()">
		<!-- 左侧返回箭头 -->
		<view v-if="IsShow_jiantou" :style="{'color':color,'fontSize':jiantou_FontSize}" hover-class="hover-class"
			class="jiantou" hover-stay-time="50">
			<u-icon name="arrow-left" size="40"></u-icon>
		</view>
		<!-- 标题部分 -->
		<view class="title">
			<slot name="title" style="font-size: 50rpx;"></slot>
		</view>
	</view>
</template>

<script>
	const navBar = {
		name: "navBar",
		props: {
			//箭头的字体大小
			jiantou_FontSize: {
				type: String,
				default: "65rpx"
			},
			//导航栏的高度
			navBarHeight: {
				type: String,
				default: "44px"
			},
			//是否需要箭头
			IsShow_jiantou: {
				type: Boolean,
				default: true
			},
			//导航栏的透明度以及颜色
			navBarOpcaticy: {
				type: String,
				default: "rgba(245,245,245,1)"
			},
			//返回箭头字体颜色
			color: {
				type: String,
				default: "#ccc"
			}
		},
		data() {
			return {

			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
	export default navBar
</script>

<style scoped lang="scss">
	.navBarBox {
		position: sticky;
		top: 0;
		padding: 0 20rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: rgba(245, 245, 245, 1);
		z-index: 9999;
		@include flexbox(space-between, center, row);

		height: 44px; //标准高度

		/* 箭头 */
		.jiantou {
			position: absolute;
			left: 1%;
			top: -7%;
			color: black;

		}

		/* 标题 */
		.title {
			@include flexbox(center, center, row);
			flex: 1;
		}

		.jiantou,
		.title {
			height: 100%;

		}
	}
</style>